<div class="pic-container-scroll">
	<div class="img-container">
		<div id="imgContainer" :class="ParamSort.layout.value=='imageList'?'imagelist':''">
			<template v-if="ParamSort.layout.value == 'table'">
				<!--{template mobile/components/index/image/image_table}-->
			</template>
			<template v-else>
				<!--{template mobile/components/index/image/image_other}-->
			</template>

			<template  v-if="ParamImages.data.length&&ParamBasic.page>=ParamBasic.totalpage&&!ParamImages.loading&&!ParamImages.valloading">
				<div style="position: absolute;bottom: 0;left: 0;width: 100%;line-height: 40px;text-align: center;color: var(--content-text);font-size: 14px;">没有更多了</div>
			</template>
			<template v-if="ParamImages.valloading">
				<div style="position: absolute;bottom: 0;left: 0;width: 100%;line-height: 40px;text-align: center;color: var(--content-text);font-size: 14px;">
					<van-loading type="spinner" size="24px">加载中...</van-loading>
				</div>
			</template>
			
			
		</div>
		<template v-if="ParamImages.data.length==0&&!ParamImages.loading&&!ParamImages.valloading">
			<van-empty
			  class="custom-image"
			  image="dzz/pichome/image/nodata.svg"
			  description="暂无数据"
			/>
		</template>
		
	</div>
	
</div>
<van-overlay :show="ParamImages.loading" :z-index="5000" />
<!--{template mobile/components/index/image/JsImageList}-->
<!--{template mobile/components/index/image/JsImgageWaterfall}-->
<!--{template mobile/components/index/image/JsImagerowGrid}-->
<!--{template mobile/components/index/image/JsImageTable}-->
<script type="text/javascript">
	var ImagesData = $.extend({},{
		DocumentAdminId:'$_G[adminid]',
		ParamImages:$.extend({},JsImageListData,JsImgageWaterfallData,JsImagerowGridData,JsImgageTableData,{
			resize:0,
			data:[],
			Newdatas:{},
			type:'refresh',
			checked:false,
			operation:{
				type:'',
				rids:[]
			},
			loading:true,
			valloading:false
		}),
	});
	var ImagesWatchJs = {
		'ParamImages.resize':debounce(function(val){
			var self = this;
			self.ImagesLayoutInit();
		},500),
		'ParamImages.data':{
			handler(val){
				var self = this;
				self.ImagesLayoutInit();
				if(self.ParamImages.type == 'append'){
					self.ParamImages.valloading = false;
				}else{
					self.ParamImages.loading = false;
				}
			},
			deep:true,
			// immediate:true
		},
		'ParamImages.checked':{
			handler(val){
				if(val){
					this.ParamFooter.data.clear.show = false;
					this.ParamFooter.data.search.show = false;
					this.ParamFooter.data.screen.show = false;
					this.ParamFooter.data.sort.show = false;
					this.ParamFooter.data.user.show = false;
					// this.ParamFooter.data.collectcheck.show = true;
					// this.ParamFooter.data.outcheck.show = true;
				}else{
					this.CommonSetFooterBadge();
					this.ParamFooter.data.search.show = true;
					this.ParamFooter.data.screen.show = true;
					this.ParamFooter.data.sort.show = true;
					this.ParamFooter.data.user.show = true;
					// this.ParamFooter.data.collectcheck.show = false;
					// this.ParamFooter.data.outcheck.show = false;
				}
				this.ParamImages.type = 'refresh';
				this.ImagesLayoutInit();
			},
			deep:true,
			// immediate:true
		},
		'ParamImages.loading':{
			handler(val){
				var self = this;
				if(val){
					self.$toast.loading({
						message: '加载中...',
						className:'conter-toast',
						duration: 0,
						forbidClick: true,
						loadingType: 'spinner',
					});
				}else{
					self.$toast.clear();
				}
			},
			deep:true,
			immediate:true
		}
	};
	var ImagesJs = $.extend({},JsImagerowGridMethods,JsImgageWaterfallMethods,JsImageListMethods,JsImgageTableMethods,{
		ImagesMoreClick(item){
			this.ParamImages.operation.rids = [item.rid];
			this.ImagesMore.data = [];
			if(parseInt(item.share)){
				this.ImagesMore.data.push({ name: '分享',type:'share' });
			}
			if(parseInt(item.download)){
				this.ImagesMore.data.push({ name: '下载',type:'down' });
			}
			<!--{if $_G[adminid]}-->
				this.ImagesMore.data.push({ name:'固定地址',type:'address' });
			<!--{/if}-->
			this.ImagesMore.dpath = item.dpath;
			this.ImagesMore.visible = true;
		},
		ImagesDetailClick(rid,index){
			var self = this;
			if(self.ParamImages.checked){
				var index = self.ParamImages.operation.rids.indexOf(rid);
				if(index > -1){
					self.ParamImages.operation.rids.splice(index,1);
				}else{
					self.ParamImages.operation.rids.push(rid);
				}
			}else{
				var arr = [];
				for(var i in self.ParamImages.data){
					arr.push(self.ParamImages.data[i].rid);
				}
				arr = arr.join(',');
				sessionStorage.setItem('imgs',arr);
				var params = JSON.parse(JSON.stringify(self.ParamData));
				params['historygo'] = window.location.href;
				params['ispage'] = this.ParamBasic.page>=this.ParamBasic.totalpage?false:true;
				sessionStorage.setItem('imgparam',JSON.stringify(params));
				window.location.href = SITEURL+MOD_URL+'&op=details#rid='+rid;
			}
			
		},
		ImagesMounted(){
			var self = this;
			var ParamBasic = self.ParamBasic;
			var beforeScrollTop = document.body.scrollTop,fn = fn || function() {};  
			$('.pic-container-scroll').scroll(function(e){
				var afterScrollTop = $(this).scrollTop(),
				updown = afterScrollTop - beforeScrollTop;
				if(afterScrollTop == 0){
					self.ParamFooter.IsShow = 'up';
					return false;
				}
				if( updown === 0 ) {
					return false;
				}            
				beforeScrollTop = afterScrollTop;
				self.ParamFooter.IsShow = updown > 0 ? "down" : "up";  //判断往上还是往下
				self.ImagesLayoutScrollShow();
				if($(this).scrollTop()+$(this).outerHeight()>=this.scrollHeight-80){
					if(ParamBasic.page>=ParamBasic.totalpage || self.ParamImages.loading || self.ParamImages.valloading){
						return false;
					}
					self.CommonhandleHash('scroll');
				}
			});
			// $('.div-black').click(function(){
			// })
			window.addEventListener('resize',function(){
				self.ParamImages.resize += 1;
			});
		},
		ImagesImgload(rid){
			var self = this;
			var item = $(self.$refs['ref_'+rid]);
			item.removeClass('opacity');
			item.parents('.imgbox-border').css('background','').removeClass('radius');
		},
		ImagesLayoutInit(){
			var self = this;
			if(self.ParamSort.layout.value == 'waterFall'){
				self.ImagesWaterfalllayoutCompute();
			}else if(self.ParamSort.layout.value == 'rowGrid'){
				self.ImagesRowGridtlayoutCompute();
			}else if(self.ParamSort.layout.value == 'table'){
				self.ImagesTablelayoutCompute();
			}else{
				self.ImagesListlayoutCompute();
			}
		},
		ImagesLayoutScrollShow(){
			var self = this;
			var H = jQuery('.pic-container-scroll')[0].clientHeight;//获取可视区域高度
			var S = jQuery('.pic-container-scroll')[0].scrollTop;
			var arr = [];
			
			if(self.ParamSort.layout.value == 'waterFall'){
				var StoreImgdatas = JSON.parse(JSON.stringify(self.ParamImages.imgageWaterfall.StoreImgdatas));
			}else if(self.ParamSort.layout.value == 'rowGrid'){
				var StoreImgdatas = JSON.parse(JSON.stringify(self.ParamImages.imagerowGrid.StoreImgdatas));
			}else if(self.ParamSort.layout.value == 'table'){
				var StoreImgdatas = JSON.parse(JSON.stringify(self.ParamImages.imgageTable.StoreImgdatas));
			}else{
				var StoreImgdatas = JSON.parse(JSON.stringify(self.ParamImages.imageList.StoreImgdatas));
			}
			self.ParamImages.Newdatas = {};
			for(var o in StoreImgdatas){
				var item = JSON.parse(JSON.stringify(StoreImgdatas[o]));
				if ((H+S) >= item.ptop && S<item.pbottom) {
					item['index'] = parseInt(o);
					self.ParamImages.Newdatas[item.rid] = item;
				}
			}
			
		}
	});
</script>